﻿    <style type="text/css">
        .statusItem {
            display: inline-block;
            padding: 5px;
            padding: 5px;
            text-align: center;
            border-radius: 5px;
        }

            .statusItem .icom {
                font-size: 12px;
                display: block;
            }

            .statusItem.finished {
                color: #bd0303;
                border: 0px solid #ff6a00;
            }

            .statusItem.current {
                color: #ff0000;
                border: 0px solid #ff0000;
            }

            .statusItem.future {
                color: #c5c4c4;
                border: 0px solid #c5c4c4;
            }

            .statusItem .title {
                font-size: 10px;
                display: block;
            }

        .limeSplit {
            border-top: 1px solid #ddd;
            height: 18px;
            width: 10px;
            display: inline-block;
        }

        .k_status_hide {
            display: none;
        }

        #InApproveProcess {
            display: none;
            text-align:center;
        }

        #InSubmitProcess {           
           padding: 5px;
            border: 0px solid #d6d4d4;
            border-radius: 3px;
            background-color: #fff;
            text-align: center;
            font-size: 20px;
            width: 100%;
            color: #757373;
        }

        #K_WorkflowState {
            color: #f00;
        }
       .workflowTitle{
            text-align: center;
    padding: 6px 10px;
    font-size: 16px;
    border: 1px solid #f1e1af;
    border-radius: 45px 0px 0px 45px;
    color: #FF5722;
    display: inline-block;
    float: left;
    background-color: #fbfce5;
    transform: rotate(-2deg);
    font-weight: 600;
    transition: width 2s, height 2s, transform 2s;
    animation: statusTitle 1s;
    -webkit-animation: statusTitle 1s;
        }
        .workflowTitle:hover{
		transform: rotate(358deg);
	}
@keyframes statusTitle
{
	
	from {transform: rotate(0deg);margin-left:100px;}
	to {transform: rotate(360deg);margin-left:0px;};
}

@-webkit-keyframes statusTitle /* Safari and Chrome */
{
	from {transform: rotate(0deg);margin-left:100px;}
	to {transform: rotate(360deg);margin-left:0px;};
}
    </style>
    <div id="workflowDiv">
        <div class="statusItem pull-right" id="InSubmitProcess" style="padding-top:5px;padding-right: 0px;">
            <div style="margin:5px 0 5px 0">
                <span id="workflowTitle">
                </span>
                <button class="btn btn-danger pull-right" id="K_Submit" style="display:none;margin-left:5px;">Submit</button>
                <button class="btn btn-danger pull-right" id="K_checkIn" style="display:none;margin-left:5px;">Check in</button>
                <button class="btn btn-danger pull-right" id="K_reEdit" style="display:none;margin-left:5px;">ReEdit</button>
                <button class="btn btn-danger pull-right" id="K_Approve" style="display:none;margin-left:5px;">Approve</button>
                <button class="btn btn-danger pull-right" id="K_ToDaft" style="display:none;margin-left:5px;">Reject</button>
                <button class="btn btn-danger pull-right" id="imgUnLock" onclick="UpdateCheckStatus('Checked Out')" style="display:none;margin-left:5px">Check out</button>
            </div>
        </div>
        <div id="InApproveProcess" style="font-size:12px">
            <div class="statusItem finished" id="L0StatusCSS1"><span class="glyphicon glyphicon-ok-circle icom " id="L0StatusCSS2"></span> <span id="L0Status">Submit</span></div>

            <div class="limeSplit" id="div1a">&nbsp;</div>

            <div class="statusItem {{K_Class_State1}} {{k_display1}}" id="div1b"><span class="glyphicon {{K_Class1}} icom "></span> <span>{{L1Approve}}</span></div>

            <div class="limeSplit {{k_display1}}" id="div2a">&nbsp;</div>

            <div class="statusItem {{K_Class_State2}} {{k_display2}}" id="div2b"><span class="glyphicon {{K_Class2}} icom "></span> <span>{{L2Approve}}</span></div>

            <div class="limeSplit {{k_display2}}" id="div3a">&nbsp;</div>

            <div class="statusItem {{K_Class_State3}} {{k_display3}}" id="div3b"><span class="glyphicon {{K_Class3}} icom "></span> <span>{{L3Approve}}</span></div>

            <div class="limeSplit {{k_display3}}" id="div4a">&nbsp;</div>

            <div class="statusItem {{K_Class_State4}} {{k_display4}}" id="div4b"><span class="glyphicon {{K_Class4}} icom "></span> <span>{{L4Approve}}</span></div>

            <div class="limeSplit {{k_display4}}" id="div5a">&nbsp;</div>

            <div class="statusItem {{K_Class_State_publish}}" id="div5b"><span class="glyphicon {{K_Class_publish}} icom "></span> <span>Published</span></div>            
        </div>

       
    </div>

